<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <link rel="stylesheet" href="/static/pengpai/component/pear/css/pear.css" />
    <script src="/static/pengpai/component/layui/layui.js"></script>
    <script src="/static/pengpai/component/pear/pear.js"></script>
    <script src="/static/pengpai/admin/js/jquery.min.js"></script>
</head>
<body>
<form id = "permission-table" class="layui-form  layui-col-xs6 layui-col-md4 layui-col-md-offset4" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">上级菜单:</label>
        <div class="layui-input-block">
            <ul class="dtree" data-id="-1" id="selectParent" name="parentId"></ul>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单ID:</label>
        <div class="layui-input-block">
            <input type="text" name="permissionId" th:value="${pm.permissionId}" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称:</label>
        <div class="layui-input-block">
            <input type="text" name="permissionName" th:value="${pm.permissionName}" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限标识:</label>
        <div class="layui-input-block">
            <input type="text" name="permissionKey" th:value="${pm.permissionKey}" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单类型:</label>
        <div class="layui-input-block">
            <select name="permissionType" lay-verify="required" lay-search>
                <option value=""></option>
                <option th:selected="${pm.permissionType=='N'}" value="N">导航</option>
                <option th:selected="${pm.permissionType=='M'}" value="M">模块</option>
                <option th:selected="${pm.permissionType=='B'}" value="B">按钮</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请求地址:</label>
        <div class="layui-input-block">
            <input type="text" name="href" th:value="${pm.href}"  placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图标</label>
        <div class="layui-input-block">
            <input class="layui-input" id="icon" lay-filter="icon" name="icon" th:value="${pm.icon}"
                   type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">显示顺序:</label>
        <div class="layui-input-block">
            <input type="text" name="orderId" th:value="${pm.orderId}"  placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script th:inline="javascript">
    layui.use(['form', 'jquery', 'dtree', 'popup', 'iconPicker'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        let popup = layui.popup;
        let iconPicker = layui.iconPicker;

        iconPicker.render({
            elem: '#icon',
            type: 'fontClass',
            search: true,
            page: true,
            limit: 16
        });

        dtree.renderSelect({
            elem: "#selectParent",
            url: "/sysPermission/selectParent",
            method: 'get',
            selectInputName: {nodeId: "parentId", context: "permissionName"},
            skin: "layui",
            dataFormat: "list",
            response: {treeId: "permissionId", parentId: "parentId", title: "permissionName"},  //修改response中返回数据的定义
            selectInitVal: [[${pm.parentId}]],
            selectTips: [[${pm.remark}]],
        });

        form.on('submit(saveBtn)', function(data) {
            $.ajax({
                url: '/sysPermission/update',
                data: data.field,
                type: 'post',
                success: function (result) {
                    if (result.code == 200) {
                        popup.success(result.msg, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.treetable.reload("#power-table");
                        });
                    } else {
                        popup.failure(result.msg);
                    }
                }
            })
            return false;
        });
    })
</script>
<script>
</script>
</body>
</html>
